<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">{{wheLogin?'登陆':'注册'}}</block>
		</cu-custom>
		<view class="login" style="background: url('https://file.open.banchengyun.com/2019/05/31/155929187357010.png') no-repeat;background-size: cover;">
			<view class="welcome"><img src="https://file.open.banchengyun.com/2019/05/31/155929187328167.png"></view>
			<view class="login-form" v-if="wheLogin">
				<view class="login-inp"><input placeholder-style="color:#fff" type="text" placeholder="请输入手机号" placeholder-class="inputHolder"
					 @blur="checkPhone"></view>
				<view class="login-inp"><input placeholder-style="color:#fff" type="password" placeholder="请输入密码" placeholder-class="inputHolder"
					 @blur="setPassword"></view>
				<view class="login-inp" @click="signIn"><a>立即登陆</a></view>
			</view>
			<view class="login-form" v-else>
				<view class="login-inp"><input placeholder-style="color:#fff" type="text" placeholder="请输入手机号" placeholder-class="inputHolder"
					 @blur="checkPhone"></view>
				<view class="login-inp"><input placeholder-style="color:#fff" type="password" name="password" placeholder="请设置密码"
					 placeholder-class="inputHolder" @blur="setPassword"></view>
				<!-- 				<view :class="[errorPassword ? 'login-inp error':'login-inp']"><input placeholder-style="color:#fff" type="password"
					 name="rePassword" placeholder="确认密码" placeholder-class="inputHolder" @blur="checkPassword"></view> -->
				<view class="login-inp"><input placeholder-style="color:#fff" type="text" placeholder="请输入激活码" placeholder-class="inputHolder"
					 @blur="setActiveCode"></view>
				<view class="login-inp" @click="register"><a>立即注册</a></view>
			</view>
			<view class="login-txt" @click="loginIn" v-if="wheLogin"><a>没有账号？立即注册</a></view>
			<view class="login-txt" @click="loginIn" v-else><a>已有账号？立即登录</a></view>
		</view>
	</view>
</template>

<script>
	import popup from '../../constants/popup.js'
	import allRequest from '../../api/allRequest.js'

	export default {
		data() {
			return {
				wheLogin: false,
				errorPhone: false,
				errorPassword: false,
				registerList: {
					password: '',
					rePassword: '',
					activateCode: '',
					phone: '',
				},
				loginList: {
					phone: '',
					password: '',
				}
			}
		},
		methods: {
			//保存密码
			setPassword(e) {
				let password = e.detail.value
				this.registerList.password = password
				this.loginList.password = password
			},
			//校验确认密码
			checkPassword(e) {
				let rePassword = e.detail.value
				let password = this.registerList.password
				if (password != rePassword) {
					popup.showToast('密码不一致')
					this.errorPassword = true
				} else {
					this.errorPassword = false
					this.registerList.rePassword = rePassword
				}
			},
			// 手机号码验证正则
			checkPhone(e) {
				let phone = e.detail.value;
				if (phone != '') {
					if (!(/^1[34578]\d{9}$/.test(phone))) {
						this.errorPhone = true;
						popup.showToast('手机号码格式有误')
						this.registerList.phone = phone
						this.loginList.phone = phone
					} else {
						this.errorPhone = false;
						this.phone = phone;
						this.registerList.phone = phone
						this.loginList.phone = phone
					}
				}
			},
			// 获取激活码
			setActiveCode(e) {
				let activateCode = e.detail.value
				activateCode = activateCode.replace(/^\s+|\s+$/gm, '')
				this.registerList.activateCode = activateCode
			},
			loginIn() {
				let wheLogin = this.wheLogin
				this.wheLogin = !wheLogin
			},
			registerVerify(value) {
				if (this.errorPhone) {
					popup.showToast('请输入正确的手机号')
					return false
				}
				// if (this.errorPassword) {
				// 	popup.showToast('确认密码不一致')
				// 	return false
				// }
				if (!this.registerList.phone) {
					popup.showToast('请输入手机号')
					return false
				}
				if (!this.registerList.password) {
					popup.showToast('请设置密码')
					return false
				}
				// if (!this.registerList.rePassword) {
				// 	popup.showToast('请输入确认密码')
				// 	return false
				// }
				if (!this.registerList.activateCode) {
					popup.showToast('请输入激活码')
					return false
				}
				return true
			},
			register() {
				let {
					registerList
				} = this.$data
				uni.showLoading({
					title: '注册中...'
				})
				if (this.registerVerify(registerList)) {
					delete registerList["rePassword"]
					allRequest.register(registerList)
						.then(res => {
							uni.hideLoading()
							popup.showToast(res)
							setTimeout(() => {
								uni.setStorageSync('phone', registerList.phone)
								uni.navigateBack(-1)
							}, 1500)
						})
						.catch(err => {
							uni.hideLoading()
							popup.showToast(err)
						})
				}
			},
			loginVerify(value) {
				if (this.errorPhone) {
					popup.showToast('请输入正确的手机号')
					return false
				}
				if (!this.loginList.phone) {
					popup.showToast('请输入手机号')
					return false
				}
				if (!this.loginList.password) {
					popup.showToast('请设置密码')
					return false
				}
				return true
			},
			signIn() {
				let {
					loginList
				} = this.$data
				uni.showLoading({
					title: '登陆中...'
				})
				console.log(loginList)
				if (this.loginVerify(loginList)) {
					allRequest.signIn(loginList)
						.then(res => {
							uni.hideLoading()
							popup.showToast(res)
							setTimeout(() => {
								uni.setStorageSync('phone', loginList.phone)
								uni.navigateBack(-1)
							}, 1500)
						})
						.catch(err => {
							uni.hideLoading()
							popup.showToast(err)
						})
				}
			}
		}
	}
</script>

<style>
	.login {
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 10;
	}

	.welcome {
		width: 100%;
		margin: 12% 0;
	}

	.welcome img {
		width: 100%;
		height: 40px;
	}

	.login-inp {
		margin: 0 30px 15px 30px;
		border: 1px solid #fff;
		border-radius: 25px;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.error {
		border: 2px solid #FA8072;
	}

	.login-inp label {
		width: 4em;
		text-align: center;
		display: inline-block;
		color: #fff;
	}

	.login-inp input {
		height: 20px;
		color: #fff !important;
		background-color: transparent;
		border: none;
		outline: none;
		margin-left: 20px;
		font-size: 14px;
		width: 90%;
	}

	.login-inp a {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		letter-spacing: 5px;
	}

	.login-txt {
		text-align: center;
		color: #fff;
		height: 6vh;
	}

	.login-txt a {
		color: #fff;
		padding: 0 5px;
		font-size: 14px;
	}

	.inputHolder,
	.input-placeholder {
		display: inline-block;
		color: #fff;
		font-size: 14px;
	}

	input::-webkit-input-placeholder {
		/* WebKit browsers */
		color: #fff;
		font-size: 14px;
	}

	input:-moz-placeholder {
		/* Mozilla Firefox 4 to 18 */
		color: #fff;
		font-size: 14px;
	}

	input::-moz-placeholder {
		/* Mozilla Firefox 19+ */
		color: #fff;
		font-size: 14px;
	}

	input:-ms-input-placeholder {
		/* Internet Explorer 10+ */
		color: #fff;
		font-size: 14px;
	}
</style>
